@include('Home.head')
<link rel="stylesheet" href="{{ URL::asset('css/home/layui.css') }}">

<body>
<div class="container" id="app">
    <header data-am-widget="header" class="am-header am-header-default my-header">
        <div class="am-header-left am-header-nav">
            <a  onclick="javascript:history.back(-1);" class="">
                <i class="am-header-icon am-icon-chevron-left"></i>
            </a>
        </div>
        <h1 class="am-header-title">
            <a href="#title-link" class="">@{{ title }}</a>
        </h1>
        <div class="am-header-right am-header-nav">
            <a href="/home/member/index" class="">
                <i class="am-header-icon  am-icon-home"></i>
            </a>
        </div>
    </header>
    <div class="my-nav-bar">
    	<ol class="am-breadcrumb">
          <li><a href="/home/member/index">首页</a></li>
          <li><a href="">进货记录</a></li>
        </ol>
    </div>
    <div class="am-cf cart-panel" id="">
        {{--<ul class="flow-default" id="LAY_demo1"></ul>--}}

        <div id="" class="withdrawals-panel" v-for="val in order">
            <p class="groupby-t-p">进货编号：@{{ val.ordersn }}</p>
            <hr  class="am-divider am-divider-default am-cf"/>
            <div class="groupby-img-panle">
                <a href="#"><img :src="val.img" class="am-img-responsive" /></a>
            </div>
            <div class="groupby-info-panle">
                <p>商品名：@{{ val.goods_name }}</p>
                <p>总金额：<span class="red2 bold">@{{ val.total }}</span> 元&nbsp; &nbsp;
                    <span>运费：<span class="red2 bold">@{{ val.postage }}</span>元 </span>
                <p>总件数：@{{val.total_quantity}}</p>
                <p>
                    状态：
                    <span class="red2" v-show="val.status == 0">待付款</span>
                    <span class="am-text-success" v-show="val.status == 1">已付款</span>
                    <span class="am-text-success" v-show="val.status == 2">已发货</span>
                    <span v-show="val.status == 3">交易完成</span>
                </p>
                <p>下单时间：@{{ val.created_at }}</p>
                <p v-if="val.express_time != null">发货时间：@{{ val.express_time }}</p>
                <p>
                    <a v-on:click="pay(val.id)" v-show="val.status == 0" class="am-btn am-btn-danger am-btn-xs am-radius">立即支付</a>
                    <a v-show="val.status == 1" class="am-btn am-btn-secondary am-btn-xs am-btn-success am-radius">等待发货</a>
                    <a v-on:click="affirms(val.id)" v-show="val.status == 2" class="am-btn am-btn-warning am-btn-xs am-radius">确定收货</a>
                    <a href="#" v-show="val.status == 3" class="am-btn am-btn-primary am-btn-xs am-radius">交易完成</a>
                    <a v-on:click="orderComm(val.id)" class="am-btn am-btn-default am-btn-xs am-radius">进货详情</a>
                </p>
            </div>
        </div>
        <li class="layui-flow-more" v-if="loading">加载中</li>
        <li class="layui-flow-more" v-if="loading==false">没有更多了</li>
    </div>
    @include('Home.foot')
</div>
</body>
<script src="{{ URL::asset('js/admin/layui/layui.js') }}"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            title: '进货记录',
            order:{

            },
            page: '',//总页数
            nowPage: 2,//本页
            loading: false,//异步加载时的限制
            bottomHight: 50,//滚动条到某个位置才触发时间

        },
        methods: {
            handleScroll: function () {
                var rico = this
                if (getScrollBottomHeight() <= app.bottomHight && app.nowPage < app.page && app.loading == false) {
                    app.loading = true;
                    $.post("/home/stores/getPurchaseRecord", {'_token': '{{csrf_token()}}',class:'select',page:app.nowPage+1}, function (res) {
                        for (var i = 0; i < res.data.data.length; i++) {
                            app.order.push(res.data.data[i]);
                        }
                        app.nowPage++;
                        app.loading = false;
                    });
                }
            },

            //初始化
            initialize: function () {
                var rico = this
                $.post("/home/stores/getPurchaseRecord", {'_token': '{{csrf_token()}}',class:'select'}, function (res) {
                    // console.log(res)
                    if (res.code) {
                        // app.pages = res.data
                        app.order = res.data.data;
                        app.page = res.data.last_page;
                        app.nowPage = res.data.current_page;
                    } else {
                        layer.msg(res.data);
                    }
                });
            },
            pay:function (id) {
                window.location.href="/home/stores/orderPage?id="+id;
            },
            //订单详情
            orderComm:function (id) {
                window.location.href="/home/stores/purchaseDetail?id="+id;
            },
            //确认收货
            affirms:function(id){
                var that = this;
                $.post("/home/stores/getPurchaseRecord", {'_token': '{{csrf_token()}}',class:'confirm',id:id}, function (res) {
                    // console.log(res)
                    if (res.code) {
                        layer.msg(res.data);
                        that.initialize();
                    } else {
                        layer.msg(res.data);
                    }
                });
            }

        },
        //自动执行
        mounted: function () {
            this.initialize();
        },
    })

    //添加滚动事件
    window.onload = function () {
        window.addEventListener('scroll', app.handleScroll)
    }
    //滚动条到底部的距离
    function getScrollBottomHeight() {
        return getPageHeight() - getScrollTop() - getWindowHeight();

    }
    //页面高度
    function getPageHeight() {
        return document.querySelector("html").scrollHeight
    }
    //滚动条顶 高度
    function getScrollTop() {
        var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
        if (document.body) {
            bodyScrollTop = document.body.scrollTop;
        }
        if (document.documentElement) {
            documentScrollTop = document.documentElement.scrollTop;
        }
        scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
        return scrollTop;
    }
    function getWindowHeight() {
        var windowHeight = 0;
        if (document.compatMode == "CSS1Compat") {
            windowHeight = document.documentElement.clientHeight;
        } else {
            windowHeight = document.body.clientHeight;
        }
        return windowHeight;
    }
</script>
</html>
